<template>
  <div class="product-analysis">
      <div class="item">
          <div class="header">
              <el-image style="width: 50px;height: 50px" :src="require('../../../assets/img/link.png')"></el-image>
              <h2>{{productName}}-产品断链前</h2>
          </div>
          <div class="graph-container">
              <BeforeAnalysis :before-graph-data="beforeGraphData" :product-name="productName"></BeforeAnalysis>
          </div>
      </div>
      <div></div>
      <div class="item">
          <div class="header">
              <el-image style="width: 50px;height: 50px" :src="require('../../../assets/img/fracture.png')"></el-image>
              <h2>{{productName}}-产品断链后</h2>
          </div>
          <div class="graph-container">
              <AfterAnalysis :after-graph-data="afterGraphData" :product-name="productName"></AfterAnalysis>
          </div>
      </div>
  </div>
</template>

<script>
import BeforeAnalysis from "@/page/risk/component/BeforeAnalysis.vue";
import AfterAnalysis from "@/page/risk/component/AfterAnalysis.vue";

export default {
    name: "ProductAnalysis",
    components: {AfterAnalysis, BeforeAnalysis},
    props:{
        productName:{
            type:String,
            required:true
        },
        beforeGraphData:{
            type:Object,
            required:true
        },
        afterGraphData:{
            type:Object,
            required:true
        }
    },
}
</script>

<style scoped lang="scss">
.product-analysis{
    height: 100%;
  .item{
    height: 360px;
    padding: 0 5px;
    margin-bottom: 40px;
    .graph-container{
      height: 100%;
      width: 100%;
    }
  }
}
.header{
  display: flex;
  align-items: center;
  .h2{
    padding-left: 10px;
  }
}
</style>